<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>首页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/app.css?a=1111"/>
</head>
<body class="isHide">
<div class="ft-wrap ft-view height top-biger">
    <!--顶部导航-->
    <div class="ft-wrap pos-fix">
        <div class="ft-header in-header">
            <div class="ft-menu-btn in-left-btn">
                <a class="in-menu-btn" href="javascript:;" id="menu">
                    <i class="in-menu-icon ft-sprite">菜单</i>
                </a>
                <a class="in-cart-btn" href="javascript:;" id="cart">
                    <i class="in-cart-icon ft-sprite">购物车</i>
                    <span class="in-cart-num">99+</span>
                </a>
            </div>
            <span class="ft-head-title in-head-title"><img src="../img/ft-logo.png"></span>
            <div class="ft-menu-btn in-right-btn">
                <a class="in-filtrate-btn" href="javascript:;" id="filtrate">
                    <i class="in-filtrate-icon ft-sprite">筛选</i>
                </a>
                <a class="in-refresh-btn" href="javascript:;" id="refresh">
                    <i class="in-refresh-icon ft-sprite">刷新</i>
                </a>
            </div>
        </div>
        <div class="ft-fix-top">
            <div class="in-search-bar">
                <a href="#">
                    <label class="in-search">
                        <i class="ft-sprite"></i>
                        <span>Search</span>
                    </label>
                </a>
            </div>
            <div class="nav-list">
                <div class="swiper-container" id="inNav">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide active" data-id="Latest">Latest</div>
                        <div class="swiper-slide " data-id="Shirt">Shirt</div>
                        <div class="swiper-slide " data-id="Tops">Tops</div>
                        <div class="swiper-slide " data-id="Shoes">Shoes</div>
                        <div class="swiper-slide " data-id="Hobbies">Hobbies</div>
                    </div>
                </div>
                <div class="pos-abs-tl nav-left-placeholder">左侧占位</div>
                <div class="pos-abs-tr nav-right-placeholder">右侧占位</div>
            </div>
        </div>
    </div>
    <!--产品滚动内容-->
    <div class="ft-container no-padding height">
        <div class="swiper-container product-swiper" id="productSwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" id="Latest">
                    <div class="ft-overflow" id="LatestFlow">
                        <div class="ft-overflow-box">
                            <div class="product-list">
                                <div class="list-container box-list">
                                    <ul class="row-2 clearfix">
                                        <li>
                                            <div class="pro-tips">
                                                <div class="pro-cutdown">
                                                    <label class="ft-cutdown" data-time="2017/04/20 23:59:59">
                                                        <span class="ft-time-day" data-format="d"></span>:<span
                                                            class="ft-time-hour"
                                                            data-format="h"></span>:<span
                                                            class="ft-time-minute" data-format="m"></span>
                                                    </label>
                                                    <label class="pro-time-text">Today's Deal</label>
                                                </div>
                                            </div>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product1.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star3">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <div class="pro-tips">
                                                <div class="pro-discount-tips">-50%</div>
                                            </div>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product2.jpg">
                                                        <span class="pro-img-loading"></span>

                                                        <span class="pro-sale-tips">Almost Gone!</span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star2">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product3.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star3">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <div class="pro-tips">
                                                <div class="pro-cutdown">
                                                    <label class="ft-cutdown" data-time="2017/04/21 18:00:00">
                                                        <span class="ft-time-day" data-format="d"></span>:<span
                                                            class="ft-time-hour"
                                                            data-format="h"></span>:<span
                                                            class="ft-time-minute" data-format="m"></span>
                                                    </label>
                                                    <label class="pro-time-text">Today's Deal</label>
                                                </div>
                                            </div>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product4.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star2">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product1.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$160.00</span>
                                                            <span class="price-old"> US$180.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star4">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product2.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star5">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product3.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star3">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product4.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star2">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product3.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$160.00</span>
                                                            <span class="price-old"> US$180.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star4">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product1.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star5">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product3.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star3">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product4.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star2">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product1.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$160.00</span>
                                                            <span class="price-old"> US$180.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star4">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product2.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star5">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product3.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star3">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product4.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star2">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product3.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$160.00</span>
                                                            <span class="price-old"> US$180.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star4">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <div class="pro-box">
                                                    <label class="pro-img">
                                                        <img src="../img/pro-error.jpg"
                                                             data-original="../img/product1.jpg">
                                                        <span class="pro-img-loading"></span>
                                                    </label>
                                                    <div class="pro-intro">
                                                        <label class="pro-price">
                                                            <span class="price-new">US$80.00</span>
                                                            <span class="price-old"> US$160.00 </span>
                                                        </label>
                                                        <div class="pro-hots clearfix">
                                                            <label class="pro-star star5">
                                                                <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i><i class="ft-sprite"></i><i
                                                                    class="ft-sprite"></i>
                                                            </label>
                                                            <span class="pro-sale-volume">10k+bought</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="list-loading">
                                        <i><img src="../img/loading.gif"></i>
                                        <span>Loading</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--左侧侧滑菜单-->
    <div class="ft-pop-disk ft-menu-bar">
        <div class="ft-pop-box ft-menu-box animated-right">
            <div class="ft-personal">
                <label class="personal-img"><img src="../img/user-headImg.jpg"></label>
                <div class="ft-user-name">
                    <label class="presonal-intro">
                        <span>Wangyi</span>
                        <a href="#">Edit Profile<i class="ft-sprite"></i></a>
                    </label>
                </div>
            </div>
            <div class="personal-nav">
                <div class="swiper-container" id="menuBox">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon1"></i>
                                <span>Browse</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon2"></i>
                                <span>Search</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon3"></i>
                                <span>Cart</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon4"></i>
                                <span>Orders</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon5"></i>
                                <span>Coupons</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon6"></i>
                                <span>Wishlist</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon7"></i>
                                <span>Wallet</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon8"></i>
                                <span>Settings</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon9"></i>
                                <span>About Us</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon10"></i>
                                <span>Customer Services</span>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <i class="ft-sprite menu-icon11"></i>
                                <span>Forum</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--右侧筛选内容-->
    <div class="ft-pop-disk ft-filtrate-bar">
        <div class="ft-pop-box ft-filtrate-box animated-left">
            <div class="filtrate-title">
                <a href="javascript:;"><i class="ft-sprite"></i></a>
                <span>Refine</span>
            </div>
            <div class="filtrate-list-bar">
                <div class="filtrate-list filtrate-list1 ft-overflow">
                    <a href="javascript:;">Rating<span class="t-ellipsis"></span></a>
                    <a href="javascript:;">Category<span class="t-ellipsis"></span></a>
                    <a href="javascript:;">Color<span class="t-ellipsis">Bronze, Gold</span></a>
                    <a href="javascript:;">Rating<span class="t-ellipsis"></span></a>
                    <a href="javascript:;">Category<span class="t-ellipsis"></span></a>
                    <a href="javascript:;">Color<span class="t-ellipsis">Bronze, Gold</span></a>
                    <a href="javascript:;">Rating<span class="t-ellipsis"></span></a>
                    <a href="javascript:;">Category<span class="t-ellipsis"></span></a>
                    <a href="javascript:;">Color<span class="t-ellipsis">Bronze, Gold</span></a>
                    <a href="javascript:;">Rating<span class="t-ellipsis"></span></a>
                </div>
                <div class="filtrate-list filtrate-list2 ft-overflow animated-left">
                    <a class="active" href="javascript:;">Category<i class="ft-sprite"></i></a>
                    <a href="javascript:;">Color<i class="ft-sprite"></i></a>
                    <a class="active" href="javascript:;">Rating<i class="ft-sprite"></i></a>
                    <a href="javascript:;">Category<i class="ft-sprite"></i></a>
                </div>
            </div>

            <div class="filtrate-button clearfix">
                <a class="filtrate-clear" href="javascript:;">Clear All</a>
                <a class="filtrate-apply" href="javascript:;">Apply</a>
            </div>
        </div>
    </div>

    <!--下方购物车-->
    <div class="ft-pop-disk ft-cart-bar">
        <div class="ft-pop-box ft-cart-box animated-bottom">
            <div class="ft-cart-close">
                <a href="javascript:;">
                    <i class="ft-sprite"></i>
                    <span>CONTINUE SHOPPING</span>
                </a>
            </div>
            <div class="ft-cart-list-bar">
                <div class="ft-cart-none-box" style="display: none">
                    <div class="ft-cart-none">
                        <i><img src="../img/icon-cart.png"></i>
                        <span>Your shopping cart is empty.</span>
                    </div>
                    <div class="ft-cart-btn-bar">
                        <a class="ft-cart-btn" href="#">Go Shopping</a>
                    </div>
                </div>
                <div class="ft-cart-list-box">
                    <div class="cart-list-hd clearfix">
                        <label class="float-left">Item Total</label>
                        <label class="float-right">
                            <span class="cart-money">$256.00</span>
                            <span class="cart-intro t-ellipsis">Excluding Freight</span>
                        </label>
                    </div>
                    <div class="cart-list-bd ft-overflow">
                        <div class="cart-shop-list">
                            <div class="shop-item">
                                <div class="shop-intro-box clearfix">
                                    <div class="shop-img-box">
                                        <label class="ft-radio active">
                                            <input type="checkbox" name="shopItem" value="">
                                            <span></span>
                                        </label>
                                        <div class="shop-img ft-img-box">
                                            <div class="pro-tips">
                                                <div class="pro-discount-tips">-50%</div>
                                            </div>
                                            <label><img src="../img/cart-pro1.jpg"></label>
                                        </div>
                                    </div>
                                    <div class="shop-intro">
                                        <a href="#" class="t-clamp">New Fashion Stainless Steel Practice Training
                                            Butterfly</a>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Color:</span>
                                            <span class="i-item-dd t-ellipsis">Brown</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Size:</span>
                                            <span class="i-item-dd t-ellipsis">15.60</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Quantity:</span>
                                            <span class="i-item-dd t-ellipsis item-quantity">1</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Sold By:</span>
                                            <span class="i-item-dd t-ellipsis"><a href="#">JAZZEVAR Official
                                                Store</a></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="shop-edit-box clearfix">
                                    <span class="edit-tips">This item is no longer available<i
                                            class="ft-sprite"></i></span>
                                    <label class="edit-handle">
                                        <a class="edit-btn" href="javascript:;"><i class="ft-sprite">编辑</i></a>
                                        <a class="delete-btn" href="javascript:;"><i class="ft-sprite">删除</i></a>
                                    </label>
                                </div>
                            </div>
                            <div class="shop-item">
                                <div class="shop-intro-box clearfix">
                                    <div class="shop-img-box">
                                        <label class="ft-radio">
                                            <input type="checkbox" name="shopItem" value="">
                                            <span></span>
                                        </label>
                                        <div class="shop-img ft-img-box">
                                            <label><img src="../img/cart-pro2.jpg"></label>
                                        </div>
                                    </div>
                                    <div class="shop-intro">
                                        <a href="#" class="t-clamp">New Fashion Stainless Steel Practice Training
                                            Butterfly</a>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Color:</span>
                                            <span class="i-item-dd t-ellipsis">Brown</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Size:</span>
                                            <span class="i-item-dd t-ellipsis">15.60</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Quantity:</span>
                                            <span class="i-item-dd t-ellipsis item-quantity">3</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Sold By:</span>
                                            <span class="i-item-dd t-ellipsis"><a href="#">JAZZEVAR Official
                                                Store</a></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="shop-edit-box clearfix">
                                    <label class="edit-handle">
                                        <a class="edit-btn" href="javascript:;"><i class="ft-sprite">编辑</i></a>
                                        <a class="delete-btn" href="javascript:;"><i class="ft-sprite">删除</i></a>
                                    </label>
                                </div>
                            </div>
                            <div class="shop-item">
                                <div class="shop-intro-box clearfix">
                                    <div class="shop-img-box">
                                        <label class="ft-radio">
                                            <input type="checkbox" name="shopItem" value="">
                                            <span></span>
                                        </label>
                                        <div class="shop-img ft-img-box">
                                            <label><img src="../img/cart-pro2.jpg"></label>
                                        </div>
                                    </div>
                                    <div class="shop-intro">
                                        <a href="#" class="t-clamp">New Fashion Stainless Steel Practice Training
                                            Butterfly</a>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Color:</span>
                                            <span class="i-item-dd t-ellipsis">Brown</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Size:</span>
                                            <span class="i-item-dd t-ellipsis">15.60</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Quantity:</span>
                                            <span class="i-item-dd t-ellipsis item-quantity">2</span>
                                        </label>
                                        <label class="intro-item">
                                            <span class="i-item-dt">Sold By:</span>
                                            <span class="i-item-dd t-ellipsis"><a href="#">JAZZEVAR Official
                                                Store</a></span>
                                        </label>
                                    </div>
                                </div>
                                <div class="shop-edit-box clearfix">
                                    <label class="edit-handle">
                                        <a class="edit-btn" href="javascript:;"><i class="ft-sprite">编辑</i></a>
                                        <a class="delete-btn" href="javascript:;"><i class="ft-sprite">删除</i></a>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ft-cart-btn-bar">
                        <a class="ft-cart-btn active" href="#">Checkout ( <i>2</i> )</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--设置货币-->
    <a class="currency" href="javascript:;" id="currency">设置货币</a>
    <div class="ft-pop-disk ft-currency-bar">
        <div class="ft-pop-box ft-currency-box animated-bottom">
            <div class="ft-wrap height top">
                <!--顶部悬浮导航-->
                <div class="ft-head-nav">
                    <span class="ft-head-text">Currency</span>
                    <a class="ft-close-btn right" href="javascript:;"><i class="ft-sprite"></i></a>
                </div>
                <!--中间滚动内容-->
                <div class="ft-container no-padding height background">
                    <div class="ft-overflow background">
                        <div class="ft-module no-mar no-border currency-module">
                            <div class="module-hd">
                                <span class="specail">Current Currency: </span>
                                <label id="currencyType">USD</label>
                            </div>
                            <div class="module-bd no-pad">
                                <div class="currency-list box-list">
                                    <ul class="row-2">
                                        <li>
                                            <a class="active" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="" href="javascript:;">
                                                <img src="../img/currency-icon.png">
                                                <i>USD</i><em>US$</em>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--置顶按钮-->
    <a class="pos-fix go-top" href="javascript:;" id="goTop"><img src="../img/icon-top.png"></a>
</div>

<!--优惠券-->
<div class="ft-pop-disk ft-coupons-bar">
    <div class="ft-pop-box ft-coupons-box j-alert-ani animated">
        <div class="pos-relative">
            <a class="pos-abs-tr pop-coupons-close" href="javascript:;"><i class="ft-sprite"></i></a>
            <div class="pop-coupons-bar">
                <div class="pop-coupons-cont">
                    <div class="ft-height">
                        <h2 class="pop-coupons-hd">Congratulations on getting your coupon</h2>
                        <div class="pop-coupons-bd">
                            <div class="ft-overflow">
                                <ul class="">
                                    <li>
                                        <div class="coupons-item clearfix">
                                            <div class="coupon-intro active">
                                                <div class="coupon-bg">
                                                    <span><i>$500000000.00</i> Coupons</span>
                                                    <span>Orders over <i>$ 0.00</i></span>
                                                </div>
                                            </div>

                                            <div class="coupon-date clearfix">
                                                <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                                <div class="coupon-tips active">BSKADFH</div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="coupons-item clearfix">
                                            <div class="coupon-intro active">
                                                <div class="coupon-bg">
                                                    <span><i>$500000000.00</i> Coupons</span>
                                                    <span>Orders over <i>$ 0.00</i></span>
                                                </div>
                                            </div>

                                            <div class="coupon-date clearfix">
                                                <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                                <div class="coupon-tips active">BSKADFH</div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="coupons-item clearfix">
                                            <div class="coupon-intro active">
                                                <div class="coupon-bg">
                                                    <span><i>$50.00</i> Coupons</span>
                                                    <span>Orders over <i>$ 5890.00</i></span>
                                                </div>
                                            </div>

                                            <div class="coupon-date clearfix">
                                                <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                                <div class="coupon-tips active">BSKADFH</div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pop-coupons-bto">
            <a href="#">Back to account</a>
        </div>
    </div>
</div>

<script type="text/template" id="productListCont">
    <li>
        <a href="#">
            <div class="pro-box">
                <label class="pro-img new-pro-img" data-imgID="%*imgID*%">
                    <img src="../img/pro-error.jpg" data-original="../img/product1.jpg">
                    <span class="pro-img-loading"></span>
                </label>
                <div class="pro-intro">
                    <label class="pro-price">
                        <span class="price-new">US$80.00</span>
                        <span class="price-old"> US$160.00 </span>
                    </label>
                    <div class="pro-hots clearfix">
                        <label class="pro-star star5">
                            <i class="ft-sprite"></i><i class="ft-sprite"></i><i
                                class="ft-sprite"></i><i class="ft-sprite"></i><i class="ft-sprite"></i>
                        </label>
                        <span class="pro-sale-volume">10k+bought</span>
                    </div>
                </div>
            </div>
        </a>
    </li>
</script>
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/swiper.jquery.min.js"></script>
<script src="../js/jquery.lazyload.min.js"></script>
<script src="../js/box.js"></script>
<script src="../js/ft-common.js"></script>
<script src="../js/pageScript.js"></script>
<script>
    $(function () {
        //横向菜单
        var nav = slideHorizontalNav("#inNav", {
            hasPlaceholder: true,
            clickFun: function (index) {
                product.slideTo(index)
            }
        });
        console.log(nav);

        //初始化产品列表左右滑动
        var scrollEle;
        var _clear_timer_ = 0;
        var product = common.newSwiper("#productSwiper", 1, {
            autoplay: 0,
            pagination: null,
            loop: false,
            autoplayDisableOnInteraction: false,
            lazyLoading: false,
            onInit: function (s) {
                var str = "";
                for (var i = 0; i < nav.length - 1; i++) {
                    str += "<div class='swiper-slide' id='" + nav.navID[i + 1] + "'>" +
                            "<div class='swiper-loading'></div>" +
                            "<div class='ft-overflow' id='" + nav.navID[i + 1] + "Flow'>" +
                            "   <div class='ft-overflow-box'>" +
                            "       <div class='product-list'>" +
                            "           <div class='list-container box-list'>" +
                            "               <ul class='row-2 clearfix'></ul>" +
                            "           </div>" +
                            "       </div>" +
                            "   </div>" +
                            "</div>" +
                            "</div>";
                }
                s.appendSlide(str);
                s.update(true, true);
            },
            onSlideChangeEnd: function (s) {
                clearTimeout(_clear_timer_);
                nav.element[s.activeIndex].click();
                var $container = s.container;
                var $active = $container.find(".swiper-slide-active");
                var $loading = $active.find(".swiper-loading");
                var $productList = $active.find(".box-list ul");
                var productHtml = $("#productListCont").html().replace("%*imgID*%", $active.attr("id"));
                var resultHtml = "";
                if (!$active.find(".ft-overflow").data("scroll")) {
                    console.log("执行");
                    scrollEle = scrollFun($active.find(".ft-overflow").attr("id"));
                    console.log(scrollEle);
                }

                if ($(".new-pro-img[data-imgID=" + $active.attr("id") + "]").length > 0) {
                    proImgLazyLoad(".new-pro-img[data-imgID=" + $active.attr("id") + "]", "#productSwiper .swiper-slide-active .ft-overflow", function (ele) {
                        ele.removeClass("new-pro-img");
                    });
                }
                if ($loading.css("display") == "block") {
                    _clear_timer_ = setTimeout(function () {
                        $loading.hide();
                        for (var i = 0; i < 10; i++) {
                            resultHtml += productHtml;
                        }
                        $productList.append(resultHtml);
                        proImgLazyLoad(".new-pro-img[data-imgID=" + $active.attr("id") + "]", "#productSwiper .swiper-slide-active .ft-overflow", function (ele) {
                            ele.removeClass("new-pro-img");
                        });
                        $productList.after("<div class='list-loading'><i><img src='../img/loading.gif'></i><span>Loading</span></div>");
                    }, 1000);
                }
            }
        });

        //产品图片懒加载
        proImgLazyLoad(".pro-img", ".ft-overflow");
        //页面滚动
        function scrollFun(ele) {
            var ajaxDataNum = 0, downflag = false;
            return pageScroll({
                hasTop: true,
                element: "#" + ele,
                ajaxFun: function () {
                    var $active = $("#productSwiper .swiper-slide-active");
                    if (!downflag) {
                        downflag = true;
                        var list = $("#productListCont").html().replace("%*imgID*%", $active.attr("id"));
                        var str = "";
                        for (var i = 0; i <= 9; i++) {
                            str += list;
                        }
                        setTimeout(function () {
                            ajaxDataNum++;
                            if (ajaxDataNum >= 5) {
                                $active.find(".list-loading").html("No more items");
                                return false;
                            }
                            $active.find(".box-list").find("ul").append(str);
                            proImgLazyLoad(".new-pro-img[data-imgID=" + $active.attr("id") + "]", "#productSwiper .swiper-slide-active .ft-overflow", function (ele) {
                                ele.removeClass("new-pro-img");
                            });
                            downflag = false;
                        }, 1000);
                    }
                }
            });
        }

        scrollEle = scrollFun("LatestFlow");

        //显示优惠券
        var coupons = $(".ft-coupons-bar");
        coupons.fadeIn(300);
        //关闭窗口
        $(".pop-coupons-close").click(function () {
            coupons.fadeOut(300);
        });

        //显示左侧菜单
        popLeftMenu({
            clickEle: "#menu",
            diskEle: ".ft-menu-bar",
            animateEle: ".ft-menu-box",
            isSwiper: true,
            swiperID: "#menuBox"
        });
        //显示右侧筛选
        popLeftMenu({
            clickEle: "#filtrate",
            diskEle: ".ft-filtrate-bar",
            animateEle: ".ft-filtrate-box"
        });
        //显示购物车
        popLeftMenu({
            clickEle: "#cart",
            diskEle: ".ft-cart-bar",
            animateEle: ".ft-cart-box"
        });
        //关闭窗口
        $(".ft-cart-close a").click(function () {
            $(".ft-cart-bar").click();
        });
        //购物车操作
        shopCarHandle({
            deleteFun: function () {
                if ($(".shop-item").length == 0) {
                    $(".ft-cart-list-box").hide();
                    $(".ft-cart-none-box").show();
                }
            }
        });
        //筛选操作
        filtrateHandle();
        //设置货币
        popLeftMenu({
            clickEle: "#currency",
            diskEle: ".ft-currency-bar",
            animateEle: ".ft-currency-box"
        });
        //关闭窗口
        $(".ft-close-btn.right").click(function () {
            $(".ft-currency-bar").click();
        });

        $("#currency").trigger("click");

        $(".currency-list a").click(function () {
            var currency = $(this).find("i").text();
            $(this).addClass("active").parents("li").siblings().find("a").removeClass("active");
            $("#currencyType").text(currency);
        });
    })
</script>
</body>
</html>